import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import Icon from '../../components/Icon';
import { colors, spacing, typography } from '../../styles';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Avatar } from '../../components';
import { useAuth } from './UserContext';
import { useNavigation } from '@react-navigation/native';
import { t } from '../../i18n';
const ProfileHeader = () => {
  const insets = useSafeAreaInsets();
  const { user, logout } = useAuth();
  const navigation = useNavigation();
  const onEditProfile = () => {
    navigation.navigate('ProfileSettings' as never);
  };
  const onLogin = () => {
    navigation.navigate('Login' as never);
  };
  const onLogout = async () => {
    await logout();
  };

  return (
    <View style={styles.container}>
      <View style={[styles.profileInfo, { marginTop: insets.top }]}>
        <View style={styles.avatarContainer}>
          <Avatar
            style={styles.avatar}
            lg
            src={user && user.avatar ? { uri: user.avatar } : undefined}
          />
        </View>

        {user ? (
          <>
            <Text style={styles.name}>{user.name || '匿名用户'}</Text>
            <Text style={styles.description}>
              {user.description || '暂无个人简介'}
            </Text>

            <View style={styles.locationContainer}>
              <Icon name="location" size={16} color={colors.text.tertiary} />
              <Text style={styles.location}>
                {user.city && user.province
                  ? `${user.province}, ${user.city}`
                  : user.country || '未知位置'}
              </Text>
            </View>

            <TouchableOpacity style={styles.editButton} onPress={onEditProfile}>
              <Text style={styles.buttonText}>{t('profile.edit_profile')}</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.logoutButton} onPress={onLogout}>
              <Text style={styles.buttonText}>{t('login.logout')}</Text>
            </TouchableOpacity>
          </>
        ) : (
          <TouchableOpacity style={styles.loginButton} onPress={onLogin}>
            <Text style={styles.buttonText}>{t('login.login')}</Text>
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.surface,
    paddingVertical: spacing.padding.lg,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    paddingHorizontal: spacing.padding.md,
    marginBottom: spacing.margin.md,
  },
  settingsButton: {
    padding: spacing.padding.xs,
  },
  profileInfo: {
    alignItems: 'center',
    marginBottom: spacing.margin.lg,
  },
  avatarContainer: {
    marginBottom: spacing.margin.md,
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
  },
  placeholderAvatar: {
    backgroundColor: colors.light,
    alignItems: 'center',
    justifyContent: 'center',
  },
  name: {
    ...typography.headlines.h3,
    color: colors.text.primary,
    marginBottom: spacing.margin.xs,
  },
  description: {
    ...typography.body.small,
    color: colors.text.secondary,
    marginBottom: spacing.margin.sm,
    textAlign: 'center',
    paddingHorizontal: spacing.padding.lg,
  },
  locationContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: spacing.margin.md,
  },
  location: {
    ...typography.caption.small,
    color: colors.text.tertiary,
    marginLeft: spacing.margin.xs,
  },
  editButton: {
    backgroundColor: colors.primary,
    paddingHorizontal: spacing.padding.lg,
    paddingVertical: spacing.padding.sm,
    borderRadius: 20,
  },
  loginButton: {
    backgroundColor: colors.primary,
    paddingHorizontal: spacing.padding.md,
    paddingVertical: spacing.padding.sm,
    borderRadius: 25,
    marginTop: spacing.margin.md,
  },
  logoutButton: {
    backgroundColor: colors.error,
    paddingHorizontal: spacing.padding.md,
    paddingVertical: spacing.padding.sm,
    borderRadius: 25,
    marginTop: spacing.margin.md,
  },
  buttonText: {
    ...typography.body.medium,
    color: colors.white,
  },
});

export default ProfileHeader;
